<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">知了</div>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input v-model="param.username" placeholder="请输入用户名">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="param.password"
                        @keyup.enter.native="submitForm()">
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()">登录</el-button>
                </div>
                <!-- <div style="display: flex; justify-content: space-between;">
                    <el-button type="text" @click="dialogVisible1 = true">找回密码</el-button> -->
                    <!-- <el-button type="text" @click="submitkefuForm()">客服登录</el-button> -->
                    <!-- <el-button type="text" @click="registerDialogVisible = true">立即注册</el-button>
                </div> -->
            </el-form>
        </div>
        <!-- 找回密码 -->
        <el-dialog title="找回密码" :visible.sync="dialogVisible1" width="30%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="请输入帐号">
                    <el-input v-model="form.account"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="firstStep">下一步</el-button>
            </span>
        </el-dialog>

        <el-dialog title="找回密码" :visible.sync="dialogVisible2" width="30%">
            <div class="input-area" style="width: 298px">
                <div class="input-area__title-main">手机号码验证</div>
                <div class="input-area__title-sub">请填写完整的手机号 <span class="mobile-hide__txt">135******82</span> 以验证身份
                </div>
                <el-input placeholder="请输入完整的手机号" v-model="phone" style="margin: 20px 0">
                    <template slot="prepend">+86</template>
                </el-input>
                <el-input v-model="code" placeholder="请输入短信验证码" maxlength="6">
                    <template slot="append">
                        <el-button type="text">发送验证码</el-button>
                    </template>
                </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="secondStep">下一步</el-button>
            </span>
        </el-dialog>

        <el-dialog title="找回密码" :visible.sync="dialogVisible3" width="30%">
            <div class="input-area" style="width: 298px">
                <div class="input-area__title-main">设置新密码</div>

                <el-input placeholder="请输入新密码" v-model="newPassword" show-password style="margin: 20px 0"> </el-input>
                <el-input v-model="confirmNewPassword" show-password placeholder="请再次输入新密码"> </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </span>
        </el-dialog>

        <!-- 立即注册 -->
        <el-dialog title="立即注册" :visible.sync="registerDialogVisible" width="40%">
            <div class="input-area" style="width: 298px">
                <div class="input-area__title-main" style="color: red">欢迎注册知了</div>
                <el-input placeholder="昵称" v-model="nickname" style="margin: 20px 0"> </el-input>
                <el-input placeholder="用户名" v-model="username" style="margin: 20px 0"> </el-input>
                <el-input v-model="password" show-password placeholder="密码"> </el-input>
                <el-input placeholder="手机号码" v-model="phone" style="margin: 20px 0 5px 0">
                    <template slot="prepend">+86</template>
                </el-input>
                <span style="font-size: 12px; color: #999">可通过该手机号找回密码</span>
                <div style="margin-top: 20px">
                    <el-button @click="register" type="primary">立即注册</el-button>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { loginData,kefuLogin,register,getAuthtoken } from '../../api/index';
import Cookies from 'js-cookie';

export default {
    data: function () {
        return {
            param: {
                username: '',
                password: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            },
            dialogVisible1: false,
            dialogVisible2: false,
            dialogVisible3: false,
            registerDialogVisible: false,
            form: {
                account: ''
            },
            phone: '',
            code: '',
            newPassword: '',
            confirmNewPassword: '',
            nickname: '',
            password: '',
            username:''
        };
    },
    mounted(){
        if(this.$route.query.token){
                Cookies.set('authToken', this.$route.query.token);

					getAuthtoken({auth_token:this.$route.query.token}).then((res)=>{
						if (res.code == 1) {
                            Cookies.set('token', res.data.token);

							this.$router.push('/myShop');
                        }
					})
				}
    },
    methods: {
        _isMobile() {
            let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            return flag;
        },
        submitForm() {
            this.$refs.login.validate((valid) => {
                if (valid) {
                    loginData(this.param).then((res) => {
                        console.log(res);
                        if (res.code == 1) {
                            this.$message.success('登录成功');
                            Cookies.set('token', res.data.token);
                            Cookies.set('refreshtoken', res.data.refreshtoken);
                            localStorage.setItem('ms_username', this.param.username);
                            this.$router.push('/myShop');
                        }
                        if (res.code == 11) {
							console.log(res)
                            localStorage.setItem('shopuuid', res.data.shop_id);//存储uuid方便以后使用
                            this.$router.push('/reply_msg');
                        } 
                        if(res.code != 11 && res.code !=1) {
                            console.log(res.code)
                            this.$message.error('账号或密码错误');
                        }
                    });
                }
            });
        },

        // submitkefuForm(){
        //     this.$refs.login.validate((valid) => {
        //         if (valid) {
        //             kefuLogin(this.param).then((res) => {
        //                 console.log(res);
        //                 if (res.code == 1) {
        //                     this.$message.success('登录成功');
        //                     //Cookies.set('token', res.data.token);
        //                     //Cookies.set('refreshtoken', res.data.refreshtoken);
        //                     //localStorage.setItem('ms_username', this.param.username);
        //                     if (this._isMobile()) {
        //                         this.$router.push({name:'test7'})
        //                     } else {
        //                         this.$router.push('/reply_msg');
        //                     }
        //                 } else {
        //                     this.$message.error('账号或密码错误');
        //                     //console.log('error submit!!');
        //                 }
        //             });
        //         }
        //     });
        // },
        firstStep() {
            this.dialogVisible1 = false;
            this.dialogVisible2 = true;
        },
        secondStep() {
            this.dialogVisible2 = false;
            this.dialogVisible3 = true;
        },
        confirm() { },
        async register() {
             let form={
                 nickname:this.nickname,
                 username:this.username,
                 password:this.password,
                 phone:this.phone
             };
             let res = await register(form);
             if(res.code==1){
                  this.$alert('注册成功', '消息提示', {confirmButtonText: '确定'});
             }else{
                  this.$alert('注册失败，请联系客服或再试一下', '消息提示', {confirmButtonText: '确定'});
             }
             this.registerDialogVisible = false;
        },
        cancel() {
            this.dialogVisible1 = false;
            this.dialogVisible2 = false;
            this.dialogVisible3 = false;
            this.registerDialogVisible = false;
        }
    },
}
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login-bg.jpg);
    background-size: 100%;
}

.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #ddd;
}

.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.ms-content {
    padding: 30px 30px;
}

.login-btn {
    text-align: center;
}

.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}

.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}

.input-area__title-main,
.input-area__title-sub {
    color: #000;
}

.input-area__title-sub .mobile-hide__txt {
    color: #ff9f40;
}
</style>